<template>
  <div>
    <nav>
      <!-- 左边 -->
      <div class="nav-left" @click="back">
        <!-- <van-icon name="arrow-left" size="30" color="gray"/> -->
        <img src="@/assets/img/common/back.svg" alt="" />
      </div>
      <div class="nav-center">
        <span
          class="titleitem"
          :class="state.current == index ? 'active' : ''"
          v-for="(item, index) in props.titleItem"
          :key="index"
          @click="checktitle(index,item)"
          >{{ item }}</span
        >
      </div>
      <div class="nav-right"></div>
    </nav>
  </div>
</template>

<script setup="props">
import { defineProps, reactive,getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore()
const ctx = getCurrentInstance()
const router = useRouter()
const state = reactive({
    current:0
})
// 点击事件
const checktitle = (index,item) => {
    state.current = index
    ctx.emit('clickItem',item)
};
// 父组件传来的数据
const props = defineProps({
  titleItem: {
    type: Array,
    default: () => [],
  },
});
// 返回按钮点击事件
const back =() =>{
  router.go(-1)
  store.commit('setstatus',true)
}
</script>
<style lang="scss" scoped>
.active{
    color: #FF6699 !important;
}
nav {
  z-index: 10px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  height: 44px;
  align-items: center;
  background: white;
  .nav-left {
    width: 110px;

    display: flex;
    align-content: center;
    justify-content: center;
  }
  .nav-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
    span {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666666;
    }
  }
  .nav-right {
    width: 110px;
  }
}
</style>